<template>
<!--    左侧导航栏-->
    <el-aside>
        <Logo :userName="userRef.userName" :userAvatar="userRef.userAvatar" :userId="userRef.id"/>
<!--        用来撑开logo和导航栏-->
        <div class="strut"></div>
        <el-menu
            :default-active="router.currentRoute.value.fullPath"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            router
        >
<!--  router属性，点击导航带路由的跳转-->
            <MenItem v-for="v in menuData" :item="v" :key="v.url"/>
        </el-menu>
    </el-aside>
</template>

<script setup>
import MenItem from "./MenItem.vue";
import menuRouter from "../../router/menuData.js";
import normalMenuData from "../../router/normalMenuData.js";
import {useRouter} from "vue-router";
import Logo from "./Logo.vue";
import {inject, onMounted} from "vue";
const router = useRouter();


const user = defineProps(['userRef'])
//当前用户登录信息传给Logo组件
const userRef = inject('userRef');

//导航菜单数据
var menuData = menuRouter;

// onMounted(() => {
//   if(userRef.userRole === 0){
//     //切换为普通用户的页面
//     menuData = normalMenuData;
//   }
// })



const handleOpen = (key, keyPath) => {
    // console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
    // console.log(key, keyPath)
}
</script>

<style scoped lang="less">
@import "src/assets/css/common.less";
.strut{
  background: @color;
  height: 10px
}

.el-aside{
  width: @NavMenuAsideWidth;
  height: 100%;
  margin: 0;
  padding:0;
  overflow: hidden; //可写可不写
  background: @color;
  .el-menu{
    border-right:0;
    background: @EleColor;
    z-index: 10;
  }

}

</style>